Skip to content

fix: resolve hydration mismatch in img alt attribute (#2340)#2397

Open
Sravan1011 wants to merge 1 commit into
json-schema-org:mainfrom
Sravan1011:fix/hydration-mismatch-img-alt-2340
Open

fix: resolve hydration mismatch in img alt attribute (#2340)#2397
Sravan1011 wants to merge 1 commit into
json-schema-org:mainfrom
Sravan1011:fix/hydration-mismatch-img-alt-2340

Conversation

@Sravan1011
Copy link
Copy Markdown

@Sravan1011 Sravan1011 commented May 8, 2026 •
edited
Loading

fixed - Resolves hydration mismatch warnings in React/Next.js

Issue Number:

Closes #2340

Added missing alt='octue' attribute to the octue sponsor image
Fixed multi-line alt text on the apideck image (collapsed to single line)
Fixed incorrect alt on sourcemeta image (was 'dottxt logo', now 'sourcemeta logo')
Wrapped all 14 raw tags in {isClient && (<>...</>)} guards to prevent server/client theme mismatch, consistent with the existing pattern used by all other components on the page

image

@Sravan1011
fix: resolve hydration mismatch in img alt attribute (json-schema-org…
0fba4e1 
…#2340)

- Add missing alt attribute to octue sponsor image
- Fix multi-line alt text on apideck image causing whitespace normalization mismatch
- Fix incorrect alt text on sourcemeta image (was 'dottxt logo')
- Wrap all raw <img> tags in {isClient && ...} guards to prevent
  server/client theme-dependent src mismatch, matching the pattern
  already used by <Image> components
@Sravan1011 Sravan1011 requested a review from a team as a code owner May 8, 2026 04:07
@github-project-automation github-project-automation Bot moved this to Ready to review in PR - Triage Group May 8, 2026
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 8, 2026

Hi @Sravan1011! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: issue reference, kind of change description

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 8, 2026 •
edited
Loading

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name Status Preview Last Commit
website ✅ Ready (View Log) Visit Preview 0fba4e1

@codecov
Copy link
Copy Markdown

codecov Bot commented May 8, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (07eca45) to head (0fba4e1).

Additional details and impacted files 
@@            Coverage Diff            @@
##              main     #2397   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           30        30           
  Lines          672       672           
  Branches       211       211           
=========================================
  Hits           672       672

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 8, 2026

Hi @Sravan1011! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: kind of change description

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

1 similar comment
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 8, 2026

Hi @Sravan1011! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: kind of change description

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

@vtushar06
Copy link
Copy Markdown
Collaborator

vtushar06 commented May 21, 2026

Hey @Sravan1011, I have verified the fix in the codebase, isClient guards are fully justified since the mismatch is actually on src attributes (logos.X from resolvedTheme), not just alt. your approach is consistent with the existing 19 guards in the same file.
One thing I am not sure about locally I count 9 unguarded tags but your PR says 14 - can you confirm the extra 5 are new sponsor images? Also please fill in the "kind of change" field in the PR description, the body validation check is failing because of it.

@Sravan1011
Copy link
Copy Markdown
Author

Sravan1011 commented May 21, 2026

Hi! To clarify the count — yes, the extra 5 tags compared to your local 9 are new sponsor images that were added to main after your local clone. Here's the breakdown

N-iX (logos.nix) ef67cf6 – "Add nix as a bronze sponsor"
Oracle (logos.oracle) b99ca15 – "add oracle logo"
Spin the Wheel (logos.spinthewheel) f20afb0 – "feat: add 3 new bronze sponsors"
Litslink (logos.litslink) f20afb0 – "feat: add 3 new bronze sponsors"
Time Now (logos.timenow) f20afb0 – "feat: add 3 new bronze sponsors"
My PR wraps all 14 unguarded tags (your original 9 + these 5 newer ones) with {isClient && (<>...</>)} guards to prevent the server/client theme mismatch

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

needs-info

Projects

PR - Triage Group
Status: Ready to review

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

🐛 Bug: Hydration mismatch in img alt attribute (server vs client)

2 participants

@Sravan1011 @vtushar06